<template>
	<view class="container">
		<view class="s_card radius user">
			<image class="user_card_bg" src="../../static/images/hotWater/bath.png" mode="scaleToFill"></image>
			<view class="user_info">
				<view class="head">
					<image class="head_img" :src="userHead" mode="scaleToFill"></image>
				</view>
				<view class="nick_name">
					<label style="font-weight: bolder;"> {{nickName}} </label>
					<!-- <label style="font-size: 24upx;">ID： 7758258</label> -->
				</view>
			</view>
			<!-- <view class="no_login">
				<view class="">
					<view class="head">
						<image class="head_img" :src="userHead" mode=""></image>
					</view>
					<view class="nick_name">
						<label> {{nickName}} </label>
						<label> {{nickName}} </label>
					</view>
				</view>
			</view> -->
		</view>
		<view class="s_card" style="padding: 0;">
			<uni-list>
				<uni-list-item v-if="user.icCardNo == null || user.icCardNo == undefined || user.icCardNo == ''" title="绑定校园一卡通" thumb="../../static/images/hotWater/band.png" @click="toPage('../pageMe/bindICcard')"></uni-list-item>
				<uni-list-item v-else title="绑定校园一卡通" thumb="../../static/images/hotWater/band.png" rightText="已绑定" :show-arrow="false" @click="toPage('../pageMe/bindICcard')"></uni-list-item><!-- -->
				<uni-list-item title="消费记录" thumb="../../static/images/hotWater/consum_list.png" @click="toPage('../pageHistory/list/index')"></uni-list-item>
				<!-- <uni-list-item title="故障报修" thumb="../../static/images/hotWater/repair.png" @click="toPage('/pageMe/repair/repair')"></uni-list-item> -->
				<!-- <uni-list-item title="关于我们" thumb="../../static/images/hotWater/info.png" @click="toPage('../pageMe/aboutme/aboutme')"></uni-list-item> -->
				<uni-list-item title="联系客服" thumb="../../static/images/hotWater/customer_service.png" @click="toPage('../pageMe/cellMe')"></uni-list-item>
				<!-- <uni-list-item title="设置" thumb="../../static/images/hotWater/seting.png" @click="toPage()"></uni-list-item> -->
				<!-- <uni-icons type=""></uni-icons> -->
			</uni-list>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				userHead: '',
				nickName: '',
				user: uni.getStorageSync('userInfo')
			}
		},
		onLoad() {
			_this = this;
			_this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				uni.getUserInfo({
					success: function(res) {
						console.log(res)
						_this.userHead = res.userInfo.avatarUrl
						_this.nickName = res.userInfo.nickName
					}
				})
			},
			cell() {
				uni.makePhoneCall({
					phoneNumber: '15177794899'
				});
			},
			toPage(path,verify) {
				if (path === undefined) {
					uni.showModal({
					    title: '提示',
					    content: '功能维护中...',
						confirmColor: "#007AFF",
						showCancel: false
					});
				} else {
					if(verify === undefined){
						uni.navigateTo({
							url: path
						})
					}
				}
			}
		}
	}
</script>
<style>
	page{
		padding-top: 0;
	}
</style>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 24upx;
		background-color: #F1F0F5;

		.user {
			position: relative;
			background: #007AFF;
			background-image: linear-gradient(135deg, #00c4ff, #014dff);

			.user_info,
			.no_login {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.head {
					width: 150upx;
					height: 150upx;
					border-radius: 50%;
					overflow: hidden;

					.head_img {
						width: 150upx;
						height: 150upx;
					}
				}

				.nick_name {
					display: flex;
					flex-direction: column;
					color: #FFF;
					padding: 20upx 24upx;
					line-height: 60upx;
				}
			}

			.user_card_bg {
				width: 128upx;
				height: 128upx;
				opacity: 0.5;
				position: absolute;
				right: 30rpx;
				// left: 10upx;
				bottom: 12upx;

			}
		}
	}
</style>
